<template>
  <div id="pubNoticeList">
    <h1 class="con-right-title">
      发布审核
    </h1>

    <!-- 上部搜索条件 -->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <freshCom @searchList="LoadRole"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      max-height="490"
      ref="table"
    >
      <el-table-column type="index" width="60" align="center" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="活动编号(ID)"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="activityInfo.type"
        label="活动类型"
        align="center"
        min-width="150"
      >
        <template slot-scope="scope">
          <span
            v-if="filterName(scope.row.activityInfo.type, 'activeType')"
            class="tag-span"
            :class="scope.row.activityInfo.type | filterClass('activeType')"
            >{{ filterName(scope.row.activityInfo.type, 'activeType') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="activityDisplay.displayName"
        label="活动名称"
        align="center"
        min-width="150"
      ></el-table-column>
      <el-table-column prop="order" label="活动排序" width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.order">{{ scope.row.order }}</span>
          <span v-else>-</span>
        </template></el-table-column
      >
      <el-table-column label="活动时间" width="360" align="center">
        <template slot-scope="scope">
          <span
            v-if="
              scope.row.rules && scope.row.rules.startDate
                ? scope.row.rules && scope.row.rules.startDate
                : '' + '-' + (scope.row.rules && scope.row.rules.endDate)
                ? scope.row.rules && scope.row.rules.endDate
                : ''
            "
            >{{
              (scope.row.rules && scope.row.rules.startDate) +
                '-' +
                (scope.row.rules && scope.row.rules.endDate)
            }}</span
          >
          <span v-else>-</span>
        </template>
        ></el-table-column
      >
      <el-table-column
        prop="activityAuditing.oneAuditing.auditingState"
        label="一审状态"
        align="center"
        width="120"
      >
        <template slot-scope="scope">
          <span
            v-if="
              scope.row.activityAuditing.oneAuditing.auditingState === 'PASS'
            "
            class="tag-span primary"
            >通过</span
          >
          <span
            v-if="
              scope.row.activityAuditing.oneAuditing.auditingState ===
                'UNAUDITED'
            "
            class="tag-span warning"
            >未审核</span
          >
          <span
            v-if="
              scope.row.activityAuditing.oneAuditing.auditingState === 'FAIL'
            "
            @click="
              noticeMessage(scope.row.activityAuditing.oneAuditing.remark)
            "
            class="tag-span danger hand"
            >未通过</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="activityAuditing.twoAuditing.auditingState"
        label="二审状态"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <span
            v-if="
              scope.row.activityAuditing.twoAuditing.auditingState === 'PASS'
            "
            class="tag-span primary"
            >通过</span
          >
          <span
            v-if="
              scope.row.activityAuditing.twoAuditing.auditingState ===
                'UNAUDITED' ||
                scope.row.activityAuditing.twoAuditing.auditingState === 'NEW'
            "
            class="tag-span warning"
            >未审核</span
          >
          <span
            v-if="
              scope.row.activityAuditing.twoAuditing.auditingState === 'FAIL'
            "
            class="tag-span danger hand"
            @click="
              noticeMessage(scope.row.activityAuditing.twoAuditing.remark)
            "
            >未通过</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="activityAuditing.oneAuditing.createdTime"
        label="创建时间"
        min-width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        label="操作"
        prop="secondStatus"
        fixed="right"
        width="180"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            v-if="
              scope.row.activityAuditing.twoAuditing.auditingState === 'FAIL'
            "
            v-permission="'wh:system:publishActivity:audit'"
            type="text"
            @click="editSort(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            v-if="
              scope.row.activityAuditing.oneAuditing.auditingState ===
                'UNAUDITED'
            "
            type="text"
            @click="auditSuccess(scope.row)"
          >
            审核通过
          </el-button>
          <el-button
            v-if="
              scope.row.activityAuditing.oneAuditing.auditingState ===
                'UNAUDITED'
            "
            type="text"
            @click="auditFail(scope.row)"
          >
            不通过
          </el-button>
          <el-button type="text" @click="openDetail(scope.row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="LoadRole"
    ></pageCom>
    <audit-success-dialog
      v-if="auditSuccessDialogData.isShow"
      :audit-success-dialog-data="auditSuccessDialogData"
      @refresh="refresh"
    ></audit-success-dialog>
    <!-- 审核不通过对话框 -->
    <no-pass-dialog
      :no-pass-dialog-data="noPassDialogData"
      v-if="noPassDialogData.isShow"
      @refresh="refresh"
    ></no-pass-dialog>
    <!-- 身份验证通过对话框 -->
    <authentication-dialog
      :auth-dialog-data="authDialogData"
      from="active"
    ></authentication-dialog>
  </div>
</template>
<script>
import { getSearchList } from '@/api/activeManagement/publish' // 接口
import topSearch from '@component/activeManagement/active/topSearch' // 上部搜索条件
import auditSuccessDialog from '@component/activeManagement/active/auditSuccessDialog' // 审核通过
import noPassDialog from '@component/activeManagement/active/noPassDialog' // 审核不通过公共组件
import authenticationDialog from '@component/common/authenticationDialog' // 公共身份验证框
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'publishList',
  msg: '活动管理-发布审核-列表页',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    noPassDialog,
    auditSuccessDialog,
    authenticationDialog
  },
  data() {
    return {
      loading: false,
      total: 0,
      formInline: {
        // 搜索条件
        oneAuditingState: '', // 一审状态,默认全部
        twoAuditingState: '', // 二审状态,默认全部
        activityType: '', // 活动类型,默认全部
        createTime: [], // 选择的时间
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        searchContent: '' // 搜索框内容
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 表格数据
      tableData: [],
      // 审核通过对话框
      auditSuccessDialogData: {
        isShow: false,
        noticeId: '',
        editFlag: false // 是否是编辑
      },
      // 审核不通过对话框
      noPassDialogData: {
        isShow: false, // 控制不通过对话框显示
        params: '' // 传递的参数
      },
      // 身份验证对话框
      authDialogData: {
        isShow: true, // 控制审核通过对话框显示
        params: '' // 传递的参数
      }
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    /* 获取列表 */
    this.LoadRole()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取列表 */
    LoadRole() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      let params = this.changeToForm(obj)
      getSearchList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 根据 id 转换为：类型（图文、小视频）/学院名称 */
    filterName(id, name) {
      let obj = this.$store.state['valueTokey'][name]
      if (id && obj && obj[id]) {
        return obj[id].name
      }
      return ''
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.LoadRole()
    },
    // 审核不通过
    auditFail(row) {
      this.noPassDialogData.isShow = true
      this.noPassDialogData.params = row
    },
    // 审核通过 TODO等待人群管理接口 获取全部人群
    auditSuccess(row) {
      this.auditSuccessDialogData.params = row
      this.auditSuccessDialogData.activityId = row.id
      this.auditSuccessDialogData.editFlag = false
      this.auditSuccessDialogData.isShow = true
    },
    // 编辑通知 TODO等待人群管理接口 获取全部人群
    editSort(row) {
      this.auditSuccessDialogData.activityId = row.id
      this.auditSuccessDialogData.params = row
      this.auditSuccessDialogData.isShow = true
      this.auditSuccessDialogData.editFlag = true
    },
    // 点击未通过 显示原因
    noticeMessage(res) {
      this.$alert(`${res}`, '系统提示', {
        confirmButtonText: '确定',
        type: 'warning'
      })
    },
    // 查看详情,跳转官方征集自评活动-查看详情
    openDetail(item) {
      let id = item.id
      let name = ''
      switch (item.activityInfo.type) {
        case 'OFFICIAL_SELF_JUDGE_ACTIVITY': //官方征集自评活动
          name = 'wh:activeManagement:selfAssessment:checkActivities'
          break
        case 'RANKING_LIST_ACTIVITY': //排行榜活动
          name = 'wh:activeManagement:rankingList:checkRankingActivities'
          break
        case 'VOTE_ACTIVITY': //投票维护
          name = 'wh:activeManagement:votingActivity:checkVotingActivities'
          break
      }
      //用于详情页判断，返回投票维护还是发布审核页面
      sessionStorage.setItem(`check${id}`, 'publishList')
      this.$router.push({ name, query: { id } })
    },
    // 搜索
    toSearch() {
      this.searchParams.pageNum = 1
      this.LoadRole()
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    }
  }
}
</script>
<style lang="less"></style>
